<template>
	<div>
		<fieldset>
			<legend>审批</legend>
			<div class="table-title">
				<ul>
					<li>审批意见：
						<el-select name="" v-model="opinion">
							<el-option v-for="item in opinionData" :label="item.label" :key="item.value" :value="item.value"></el-option>
						</el-select>
					</li>
					<li>流转：
						<el-select name="" v-model="circulation">
							<el-option v-for="item in circulationDate" :label="item.label" :key="item.value" :value="item.value"></el-option>
						</el-select>
					</li>
					<li>
						<el-button type="primary">提交</el-button>
					</li>
				</ul>
			</div>
			<div class="table-title">
				<ul>
					<h3>流程信息：</h3>
					<ul>
						<li>审批意见：
							<el-select name="" v-model="opinion">
								<el-option v-for="item in opinionData" :label="item.label" :key="item.value" :value="item.value"></el-option>
							</el-select>
						</li>
						<li>流转：
							<el-select name="" v-model="circulation">
								<el-option v-for="item in circulationDate" :label="item.label" :key="item.value" :value="item.value"></el-option>
							</el-select>
						</li>
						<li>
							<el-button type="primary">提交</el-button>
						</li>
					</ul>
				</ul>
			</div>
			<div>
				<el-form ref="form" label-width="80px" class="input">
					<el-form-item label="活动名称">
						<el-input></el-input>
					</el-form-item>
					<el-form-item label="活动区域">
						<el-select name="" v-model="circulation">
							<el-option v-for="item in circulationDate" :label="item.label" :key="item.value" :value="item.value"></el-option>
						</el-select>
					</el-form-item>
				</el-form>
			</div>
			<div class="step">
				<div class="col-4">
					<ul>
						<li>审批人：<span></span></li>
						<li>审批意见：<span></span></li>
						<li>审批时间：<span></span></li>
						<li>处理时长：<span></span></li>
						<li>任务创建时间：<span></span></li>
					</ul>
					<ul class="additional">
						<li><el-button type="primary">查看表单</el-button></li>
						<li><el-button type="primary">查看附件</el-button></li>
					</ul>
				</div>
				<div class="col-4">
					<ul>
						<li>审批人：<span></span></li>
						<li>审批意见：<span></span></li>
						<li>审批时间：<span></span></li>
						<li>处理时长：<span></span></li>
						<li>任务创建时间：<span></span></li>
					</ul>
					<ul class="additional">
						<li><el-button type="primary">查看表单</el-button></li>
						<li><el-button type="primary">查看附件</el-button></li>
					</ul>
				</div>
				<div class="col-4">
					<ul>
						<li>审批人：<span></span></li>
						<li>审批意见：<span></span></li>
						<li>审批时间：<span></span></li>
						<li>处理时长：<span></span></li>
						<li>任务创建时间：<span></span></li>
					</ul>
					<ul class="additional">
						<li><el-button type="primary">查看表单</el-button></li>
						<li><el-button type="primary">查看附件</el-button></li>
					</ul>
				</div>
				<div class="col-4">
					<ul>
						<li>审批人：<span></span></li>
						<li>审批意见：<span></span></li>
						<li>审批时间：<span></span></li>
						<li>处理时长：<span></span></li>
						<li>任务创建时间：<span></span></li>
					</ul>
					<ul class="additional">
						<li><el-button type="primary">查看表单</el-button></li>
						<li><el-button type="primary">查看附件</el-button></li>
					</ul>
				</div>
				<div class="col-4">
					<ul>
						<li>审批人：<span></span></li>
						<li>审批意见：<span></span></li>
						<li>审批时间：<span></span></li>
						<li>处理时长：<span></span></li>
						<li>任务创建时间：<span></span></li>
					</ul>
					<ul class="additional">
						<li><el-button type="primary">查看表单</el-button></li>
						<li><el-button type="primary">查看附件</el-button></li>
					</ul>
				</div>
			</div>
			<div class="upload">
				<div class="dialog">
					<div class="pop">
						<h2>上传</h2>
						<p>
							<button id="browse">选择文件</button>
							<button id="upload-btn">开始上传</button>
							<button id="upload-btn1">暂停</button>
						</p>
						<ul id="file-list">
						</ul>
					</div>
				</div>
				<div class="model"></div>
			</div>
		</fieldset>
	</div>
</template>

<script>
	export default {
		name: 'handle',
		data() {
			return {
				opinion: '',
				opinionData: [{
					value: 'qqq',
					lable: '111'
				}, {
					value: 'qqq',
					lable: '111'
				}, {
					value: 'qqq',
					lable: '111'
				}],
				circulation: '',
				circulationDate: [{
					value: 'qqq',
					lable: '111'
				}, {
					value: 'qqq',
					lable: '111'
				}, {
					value: 'qqq',
					lable: '111'
				}],
			}
		},
		mounted: function() {
         var _this = this
			var uploader = new plupload.Uploader({
				browse_button: 'browse', //触发文件选择对话框的按钮，为那个元素id
				url: "http://localhost/activiti-web/upload", //服务器端的上传页面地址
				runtime: 'post',
				flash_swf_url: 'js/Moxie.swf', //swf文件，当需要使用swf方式进行上传时需要配置该参数
				silverlight_xap_url: 'js/Moxie.xap', //silverlight文件，当需要使用silverlight方式进行上传时需要配置该参数
				// Maximum file size
				max_file_size: '10m',
				drop_element: '.pop',
				chunk_size: 0,
				drop_element: 'file-list',
				multipart: true,
				use_http_method: 'post',
				filters: {
					max_file_size:10240000,
					prevent_duplicates: false
					//不允许选取重复文件s
				},
			});
			//在实例对象上调用init()方法进行初始化
			uploader.init();
			//绑定文件添加进队列事件
			uploader.bind('FilesAdded', function(uploader, files) {
				for(var i = 0, len = files.length; i < len; i++) {
					var file_name = files[i].name; //文件名
					var str = "<a class='pic_delete' data-val='" + files[i].id + "'>删除</a>";
					//构造html来更新UI
					var html = '<li id="' + files[i].id + '" class="file" ><p class="file-name">' + file_name + '' + str + '</p><p class="progress"></p></li>';
					$(html).appendTo('#file-list');
				}
			});
			$(document).on('click', '.pic_delete', function() {
				$(this).parent().remove();
				//uploader.removeFile($(this).attr("data-val"));
				var toremove = '';
				var id = $(this).attr("data-val");
				for(var i in uploader.files) {
					if(uploader.files[i].id === id) {
						toremove = i;
					}
				}
				$('#' + id + '').hide(); //控制进度条
				uploader.files.splice(toremove, 1);
				//							console.log("" + $(this).attr("data-val"));
			});
			//绑定文件上传进度事件
			uploader.bind('UploadProgress', function(uploader, file) {
				$('#' + file.id + ' .progress').css('width', file.percent + '%'); //控制进度条
				$('#' + file.id + ' .progress').text(file.percent + '%'); //控制进度条
			});
			//上传错误
			uploader.bind('Error', function(uploader, err) {
				switch(err.code) {
					case 5:
					
						_this.$message({
							message: "上传完成！",
							type: 'success'
						});
					    
						break;
					case -602:
						_this.$message({
							message: "不允许上传重复的文件！",
							type: 'error'
						});

						break;
					case -200:
						_this.$message({
							message: "网络错误！",
							type: 'error'
						});

						break;
					case -600:
						_this.$message({
							message: "文件超过限制！",
							type: 'error'
						});

						break;
					case -500:
						_this.$message({
							message: "报错500！",
							type: 'error'
						});

						break;
					default:
						_this.$message({
							message: "服务器繁忙,请稍后重试！",
							type: 'error'
						});
						break;
				}
			});
			uploader.bind('removeFile', function(name) {});
			uploader.bind('FileUploaded', function(a, b, c) {
				_this.$emit('reFresh');
				_this.$message({
					message: "上传成功",
					type: 'success'
				});
				 $('.pic_delete').remove();
				 $(".file").remove();
					     console.log('111')
			});
			//上传按钮
			$('#upload-btn').click(function() {
				//			debugger
				uploader.start(); //开始上传

			});
			$('#upload-btn1').click(function() {
				uploader.stop(); //停止上传
				_this.$message({
					message: "停止",
					type: 'error'
				});
			});
		},
		methods: {
          
		}
	}
</script>

<style>
	#startup {
		display: flex;
		flex-direction: column;
		height: 100%;
		overflow: auto;
		font-family: 'Avenir', Helvetica, Arial, sans-serif, "微软雅黑";
		-webkit-font-smoothing: antialiased;
		-moz-osx-font-smoothing: grayscale;
		font-size: 16px;
	}
	
	ul,
	ol {
		margin: 0;
		padding: 0;
		list-style: none;
	}
	
	.table-title {
		padding: 10px;
		background: #fff;
		position: relative;
		/*-webkit-box-shadow: 0 0 5px #bcbCbC;*/
		/*box-shadow: 0 0 5px #bcbCbC;*/
		margin: 0 0 1px 0;
	}
	
	.table-title li {
		position: relative;
		display: inline-block;
		margin-left: 10px;
		margin-top: 5px;
		list-style: none;
	}
	
	.table-title li input {
		height: 25px;
		border-radius: 4px;
		border: none;
		border: 1px solid #d8dce5;
	}
	
	.table-title li input:active {
		border-radius: 4px;
	}
	
	select {
		outline: none;
		text-transform: none;
	}
	
	.el-input__icon {
		line-height: 25px;
	}
	
	.el-input__inner {
		height: 25px;
		color: #000;
	}
	
	.el-date-editor.el-input,
	.el-date-editor.el-input__inner {
		width: 140px;
	}
	
	.el-button {
		padding: 6px 15px;
	}
	
	.inpt input {
		width: 50%;
	}
	
	.step {
		width: 100%;
	}
	
	.step div {
		display: inline-block;
	}
	
	.col-4 {
		width: 21%;
		border: 1px solid #d8dce5;
		padding: 10px 10px;
		margin: 1%;
	}
	
	.col-4 li {
		margin: 7px 7px;
	}
	
	.col-4 .additional li {
		display: inline-block;
	}
	/**/
		#browse {
		width: 80px;
		height: 30px;
		line-height: 30px;
		background-color: deepskyblue;
		border: none;
		border-radius: 3px;
		font-size: 14px;
		color: #fff;
		margin-left: 5%;
	}
	
	#upload-btn {
		width: 80px;
		height: 30px;
		line-height: 30px;
		background-color: deepskyblue;
		border: none;
		border-radius: 3px;
		font-size: 14px;
		color: #fff;
	}
	
	#upload-btn1 {
		width: 80px;
		height: 30px;
		line-height: 30px;
		background-color: deepskyblue;
		border: none;
		border-radius: 3px;
		font-size: 14px;
		color: #fff;
	}
	
	.progress {
		height: 22px;
		font-size: 0;
		line-height: 22px;
		background: #13CE66;
		width: 0;
		color: #000000;
		font-size: 13px;
		margin: 3px 0px;
	}
	
	/*.dialog {
		z-index: 1005;
		top: 10%;
		right: 0;
		bottom: 0;
		left: 0;
		position: fixed;
		overflow: auto;
		margin: 0;
		display: block;
	}*/
	
	.model {
		z-index: 1004;
		position: fixed;
		left: 0;
		top: 0;
		width: 100%;
		height: 100%;
		opacity: .5;
		background: #000;
		display: none;
	}
	/*.pop {
	width: 40%;
	position: absolute;
	left: 30%;
	top: 30px;
	background-color: #fff;
	display: block;
	min-height: 300px;
	border-radius: 3px;
}*/
	/*#uploader{
		width: 100%;
		height: 100px;
		line-height: 100px;
		text-align: center;
		background-color: #F0F0F0;
	}*/
	
	.pop h2 {
		width: 100%;
		height: 30px;
		line-height: 30px;
		padding-left: 2em;
		font-size: 14px;
		color: #000;
	}
	
	.pic_delete {
		display: inline-block;
		background-color: #FF4949;
		height: 20px;
		line-height: 20px;
		color: #fff;
		border-radius: 4px;
		margin-top: 3px;
		width: 50px;
		font-size: 13px;
		text-align: center;
		margin-left: 3%;
	}
	
	#file-list {
		min-height: 260px;
	}
	
	.file {
		width: 80%;
		margin: 2% 5%;
	}
	
	.exit {
		display: inline-block;
		line-height: 1;
		white-space: nowrap;
		cursor: pointer;
		background: #fff;
		border: 1px solid #bfcbd9;
		border-color: #c4c4c4;
		color: #1f2d3d;
		-webkit-appearance: none;
		text-align: center;
		box-sizing: border-box;
		outline: none;
		margin: 0;
		-moz-user-select: none;
		-webkit-user-select: none;
		-ms-user-select: none;
		padding: 10px 15px;
		font-size: 14px;
		border-radius: 4px;
		float: right;
		margin: 2% 5%;
	}
	
</style>